<template>
  <div id="tableInfo">
      <table class="info-basic">
          <tr v-for="(v,k,i) in item" :key="i">
              <td class="label">{{names[i]}}</td>
              <td v-if="i<=4&&hasimg" class="table_content">
                  {{v}}
              </td>
              <td v-else-if="i>4&&hasimg" class="table_content" colspan="2">
                  {{v}}
              </td>
              <td v-else class="table_content">
                  <span v-if="k=='sex'">
                     {{v==true?'男':'女'}}
                  </span>
                  <span v-else>
                     {{v}}
                  </span>
              </td>
              <td v-if="i==0&&hasimg" rowspan="5" style="width:140px;text-align:center">
                  <img style="width:180px"  :src="imgUrl" alt="">
              </td>
          </tr>
          <tr>
              <td colspan="3">
                  <el-tooltip content="打印" placement="bottom" effect="light">
                    <el-button style="float:right" type="text" @click="printTable('tableInfo')"><i style="font-size:30px" class="el-icon-printer"></i></el-button>
                  </el-tooltip>
              </td>
          </tr>
      </table>
  </div>
</template>

<script>
import {printer} from '@/utils'

export default {
  props: {
    item: {
      default: Object
    },
    names: {
      default: Array
    },
    hasimg: {
      default: false
    },
    imgUrl: {
      default: String
    },
    title:{
      default:String
    },
    visible:{
      default:false
    },
    
  },
  methods: {
    printTable(table) {
      printer(table)
    }
  }
};
</script>

<style scoped>
.info-basic {
  border-collapse: collapse;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
  color:darkblue;
  width: 100%;
  height: 100%;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}
td {
  border: 2px solid #e6ebf5;
  padding: 8px;
}
.label {
  width: 16%;
  text-align: center;
}
.table_content{
  height: 100%;
  width: 500px;
}
</style>
